<template>
  <div class="group">
    <div class="roder-details">
          <div class="info">
            <div class="box" style="height: 2000px">
              <h3 class="title" style="margin-top: -10px">编辑文本</h3>
              <p style="float: right;margin-top: -50px"><span style="color: red">*</span>为必填项</p>
              <div style="background-color: #f2f2f2;height: 1px;margin-top: -10px"></div>

              <div style="padding-left: 20px;padding-right: 20px;">
                 <div style="width: 100%;margin-top: 30px">
                   <p style="float: left;margin-top: 5px"><span style="color: red">*</span> 标题：</p>
                   <a-input style="float: left;width: 300px" placeholder="请输入标题" v-model="title"></a-input>
                 </div>

                <div style="width: 100%;overflow: hidden">
                  <p style="float: left;margin-top: 20px"><span style="color: red">*</span> 类型：</p>
                  <a-select  v-model="type" placeholder="请选择类型" style="width: 300px;margin-top: 16px">
                    <a-select-option :value="0">用户协议</a-select-option>
                    <a-select-option :value="1">单耗对照表</a-select-option>

                  </a-select>
                </div>



            <div style="width: 100%;overflow: hidden" v-if="type==1">
                  <p style="float: left;margin-top: 20px"><span style="color: red">*</span> 品类：</p>
                  <a-select v-model="categoryId" placeholder="请选择品类" style="width: 300px;margin-top: 16px" >
                 <a-select-option v-for="item in categoryList"  :key="item.id" :value="item.id.toString()">
                      {{item.category_name}}
                      </a-select-option>
                  </a-select>
                </div>

<!--									  <p style="float: left;margin-top: 20px"><span style="color: red">*</span> 图片：</p>-->
<!--										   <j-image-upload class="avatar-uploader" text="上传" v-model="img" style="margin-top: 8px;"></j-image-upload>-->


                <div style="width: 100%;overflow: hidden">
                  <p style="float: left;margin-top: 20px;margin-left: 8px"><span style="color: #ff0000">*</span> 内容:</p>
<!--                  <a-textarea placeholder="请输入消息内容" v-model="content" rows="14" style="float: left;"/>-->
<!--                  <div id="editorElem" style="text-align:left;height: 200px;width: 100%"></div>-->

<!--                  <div style="margin-top: 40px">-->
<!--                    <wangEditorTool v-model="editorContent" :is-clear="isClear" @change="changeEditor" />-->
<!--                  </div>-->
                </div>
                <div class="edit_container">
                  <quill-editor
                    v-model="content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)">
                  </quill-editor>
                </div>
                <!-- 从数据库读取展示 -->
<!--                <div v-html="str" class="ql-editor">-->
<!--                  {{str}}-->
<!--                </div>-->

                <div style="width: 100%;overflow: hidden;margin-top: 20px">
                  <a-button type="primary" @click="addAgreement(0)" style="color: #F9D532;width: 80px;height: 36px;background: #333333;border-style: none;">保存</a-button>
                  <a-button type="primary" @click="addAgreement(1)" style="margin-left: 8px;width: 80px;height: 36px;background: #333333;border-style: none;color: #323232" v-show="this.$route.query.is_add=='0'">发布</a-button>
                </div>

              </div>
            </div>
          </div>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  import JImageUpload from '../../components/jeecg/JImageUpload'
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import { httpAction, postAction, getAction,putAction } from '@/api/manage'
  // import JEditor from '@/components/jeecg/JEditor'
  // import E from 'wangeditor';
  // import wangEditorTool from '../../components/wangEditorTool'

  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    components: {
      JImageUpload,
      quillEditor
    },
    name: '消息设置',
    mixins: [JeecgListMixin, mixinDevice],
    data() {
      return {
        str:'',
       isClear: false,
      editorContent:'',//富文本内容
		  img:'',
		  categoryId:'',
		  categoryList:{ //用来存放取到的品类

		  },
        title:'',
        msg_title:'',//消息标题
        type:'请选择类型',
        msg_specified:'请选择是否指定用户',//消息类型
        msg_userType:'请选择用户类型',//用户类型
        msg_account:'',//用户账号
        content:'',//消息内容
        is_all:'0',
        url: {
          list:'/sys/annountCement/msglist',
          addAgreement: '/AgreementManagement/addAgreement',
          detail: '/AgreementManagement/AgreementDetail', // 消息详情
          update: '/AgreementManagement/updateAgreement',
          deletemsg: '/sys/annountCement/delete_message',
		    pingleilist:"/Discount/getallcategory"
        },
        editorOption: {
          placeholder: '请在这里输入文本 ...'
        }
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
    // mounted() {
    //   let content = '';  // 请求后台返回的内容字符串
    //   this.str = this.escapeStringHTML(content);
    // }
    created() {
		   this.getallcategory();
      if(this.$route.query.is_add=='0'){

      }else {

        this.show_meassage();
      }
    },
    methods: {
      onEditorReady(editor) { // 准备编辑器

      },
      onEditorBlur(){}, // 失去焦点事件
      onEditorFocus(){}, // 获得焦点事件
      onEditorChange($enent){
         console.log($enent)
         // this.content = var;
      },
      // 转码
      escapeStringHTML(str) {
        str = str.replace(/&lt;/g,'<');
        str = str.replace(/&gt;/g,'>');
        return str;
      },
      //查询所有品类
		    getallcategory(){
		     getAction(this.url.pingleilist).then((res)=>{
		        if(res.success){
		         this.categoryList=res.result;
		         console.log("没有值吗"+  this.categoryList[0].category_name);
		        }else{
		          that.$message.warning(res.message);
		        } })
		},
		//新增新的协议
		addAgreement(status){
			let params = {
				img:this.img,
				categoryId:this.categoryId,
				id:this.$route.query.is_add,
				title:this.title,
			  content:this.content,
			  type:this.type,
			  status:status};
			  let url=null;
			  if(this.$route.query.is_add=='0'){
				    url=this.url.addAgreement;
			  }else{
				    url=this.url.update;
			  }
			postAction(url,params).then((res)=>{
			  if(res.success){
			    this.$message.success(res.message);
			    this.$router.push({path:'/AgreementList'})
			  }else {
			    this.$message.error(res.message);
			  }
			});
		},
      qiehuan(){
        if(this.msg_specified=='0'){
          this.msg_userType='请选择用户类型'
        }
        this.is_all = this.msg_specified;
      },
      show_meassage(){
        let params = {id:this.$route.query.is_add};
        getAction(this.url.detail,params).then((res)=>{
          if(res.success){
            this.title=res.result.title;
            this.type=res.result.type;
            this.content=res.result.content;
			  this.categoryId=res.result.categoryId;
			  this.img=res.result.img;
            this.str = this.escapeStringHTML(res.result.content);
          }else {
            this.$message.error(res.message);
          }
        });
      },
      add_message(){//创建消息
        if(this.title==null || this.title==''){
          this.$message.warning("请输入消息标题")
          return;
        }else if(this.msg_type=='请选择消息类型'){
          this.$message.warning("请选择消息类型")
          return;
        }else if(this.msg_specified=='请选择是否指定用户'){
          this.$message.warning("请选择是否指定用户")
          return;
        }else if(this.content=='' || this.content==null){
          this.$message.warning("消息内容不能为空")
          return;
        }else {
            if(this.msg_specified=='0'){
              this.msg_userType='0';
            }else if(this.msg_userType=='系统用户'){
              this.msg_userType='1';
            }else if(this.msg_userType=='前端客户'){
              this.msg_userType='2';
            }
          if(this.$route.query.is_add=='0'){//添加
            let params = {title:this.msg_title,
              message:this.content,userType:this.msg_userType,type:this.msg_type,
              isSpecified:this.msg_specified,status:0};
            postAction(this.url.addmsg,params).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$router.push({path:'/system/message'})
              }else {
                this.$message.error(res.message);
              }
            });
          }else {//编辑
            if(this.msg_type=='系统通知'){
              this.msg_type='0';
            }else if(this.msg_type=='消息'){
              this.msg_type='1';
            }else if(this.msg_type=='邮件'){
              this.msg_type='1';
            }
            if(this.msg_specified=='全体'){
              this.msg_specified='0';
            }else if(this.msg_specified=='指定用户'){
              this.msg_specified='1';
            }
            if(this.msg_userType=='系统用户'){
              this.msg_userType='1';
            }else if(this.msg_userType=='前端客户'){
              this.msg_userType='2';
            }else {
              this.msg_userType='0';
            }
            let params = {title:this.msg_title,
              message:this.content,userType:this.msg_specified,type:this.msg_type,
              isSpecified:this.msg_specified,id:this.$route.query.is_add};
            putAction(this.url.updatemsg,params).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$router.push({path:'/system/message'})
              }else {
                this.$message.error(res.message);
              }
            });
          }
        }
      },
      fabu_message(){
        if(this.msg_title==null || this.msg_title==''){
          this.$message.warning("请输入消息标题")
          return;
        }else if(this.msg_type=='请选择消息类型'){
          this.$message.warning("请选择消息类型")
          return;
        }else if(this.msg_specified=='请选择是否指定用户'){
          this.$message.warning("请选择是否指定用户")
          return;
        }else if(this.content=='' || this.content==null){
          this.$message.warning("消息内容不能为空")
          return;
        }else {
          if(this.msg_specified=='0'){
            this.msg_userType='0';
          }else if(this.msg_userType=='系统用户'){
            this.msg_userType='1';
          }else if(this.msg_userType=='前端客户'){
            this.msg_userType='2';
          }
          let params = {title:this.msg_title,
            message:this.content,userType:this.msg_specified,type:this.msg_type,
            isSpecified:this.msg_specified,status:1};
          postAction(this.url.addmsg,params).then((res)=>{
            if(res.success){
              this.$message.success(res.message);
              this.$router.push({path:'/system/message'})
            }else {
              this.$message.error(res.message);
            }
          });
        }
      },
      reset_message(){
        this.msg_title='';
        this.msg_type='请选择消息类型'
        this.msg_specified='请选择是否指定用户'
        this.msg_userType='请选择用户类型'
        this.content=''
      },
    }
  }
</script>

<style scoped lang="less">
  .roder-details {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px 35px;

    .box {
      background-color: #fff;
      padding: 30px;
      padding-left: 54px;
      margin-bottom: 20px;
      position: relative;
    }


    .info {
      position: relative;
      min-height: 800px;
      position: relative;

      .dc {
        position: absolute;
        right: 20px;
        top: 15px;
        z-index: 11;
        width: 95px;
        height: 38px;
        display: flex;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        align-items: center;
        justify-content: center;
        background-image: url(../../assets/u9117.svg);
        font-size: 13px;
        color: #333;

      }


      .view-order {
        width: 107px;
        border-width: 0px;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        box-shadow: none;
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .price1 {
        color: rgb(38, 38, 38);
        font-size: 16px;
        font-weight: 400;
        padding: 2px 2px 2px 24px;

        span {
          color: rgb(215, 1, 1);
        }

        margin: 35px 0px;
      }

      .text11 {
        display: flex;
        margin-bottom: 20px;

        & > p {
          width: 100px;
          font-weight: 100;
          font-size: 14px;
          color: #333;

        }

        div {
          h5 {
            color: #333;
            font-size: 15px;
            font-weight: 500;

            display: block;
          }

          p {
            color: #333;
            font-size: 15px;
            font-weight: 100;

            display: block;
          }
        }
      }

      .title10 {
        color: #333;
        font-weight: 700;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 20px;
        position: relative;
      }

      .text10 {
        display: flex;
        margin-bottom: 20px;

        & > p {
          width: 100px;
          font-weight: 100;
          font-size: 14px;
          color: #333;

        }

        div {
          span {
            color: #333;
            font-size: 15px;
            font-weight: 100;

            &.b {
              font-weight: 500;
            }

            display: block;
          }
        }
      }

      .table-css {
        position: relative;

        .bz {
          width: 447px;
          height: 63px;
          background: inherit;
          background-color: rgba(255, 221, 202, 1);
          position: absolute;
          right: 0px;
          top: -63px;
          display: flex;
          align-items: center;
          justify-content: center;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          flex-direction: column;

          p {
            width: 100%;
            color: rgb(251, 8, 8);
            font-size: 13px;
            padding-left: 10px;
            margin-bottom: 0px;
            line-height: 16px;
          }
        }
      }

      .btns {
        margin-top: 25px;
        margin-bottom: 60px;
        display: flex;

        .btn1 {

          border-width: 0px;
          width: 105px;
          height: 42px;
          background: inherit;
          background-color: rgba(81, 81, 81, 1);
          border: none;
          border-radius: 3px;
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
          font-weight: 500;
          font-style: normal;
          font-size: 13px;
          text-align: center;
          display: block;
          color: rgb(236, 227, 0);
          line-height: 40px;
          margin-right: 20px;
          cursor: pointer;
        }

        .btn2 {

          border-width: 0px;
          width: 105px;
          height: 42px;
          background: inherit;
          background-color: rgba(244, 244, 244, 1);
          border: none;
          border-radius: 3px;
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
          font-weight: 500;
          font-style: normal;
          font-size: 13px;
          text-align: center;
          display: block;
          color: rgb(104, 104, 104);
          line-height: 40px;
          margin-right: 20px;
          cursor: pointer;
        }
      }

      .prices {
        display: flex;

        .price {
          width: 50%;
        }
      }

      .price {
        color: rgb(38, 38, 38);
        font-size: 16px;
        font-weight: 700;

        span {
          color: rgb(215, 1, 1);
        }

        margin: 35px 0px;
      }

      .text1 {
        width: 533px;
        height: 105px;
        padding: 3px 2px 3px 2px;
        font-family: 'ArialMT', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-decoration: none;
        letter-spacing: normal;
        color: #000000;
        vertical-align: none;
        text-align: left;
        text-transform: none;
        background-color: #f9f9f9;
        border-color: transparent;
        resize: none;
        outline: none;
        padding: 10px;
      }

      .tabs {
        .tab {
          margin-bottom: 10px;
          display: flex;

          h5 {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
            margin-right: 6px !important;
          }

          .tab-content {
            height: 36px;
            display: flex;

            p {
              border: 1px solid rgb(242, 242, 242);
              min-width: 100px;
              height: 36px;
              height: 36px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 15px;
              color: #333;
              font-size: 15px;
              margin-right: 6px;

              cursor: pointer;

              b {
                display: none;
                font-weight: 700;
              }

              &.active {
                color: rgb(255, 236, 112);
                font-weight: 700;
                background-color: rgb(74, 74, 74);
              }

              &:hover {
                b {
                  display: block;
                }

                span {
                  display: none;
                }
              }
            }
          }
        }
      }

      h3.title {
        height: 30px;
        line-height: 30px;
        position: relative;
        font-size: 16px;
        color: #333;
        font-weight: 700;
        margin-bottom: 25px;

        &:after {
          position: absolute;
          height: 100%;
          width: 5px;
          position: absolute;
          left: -25px;
          top: 0px;
          background-color: rgba(74, 74, 74, 1);
          content: "";
        }
      }

      .title2 {
        width: 112px;
        padding: 2px 2px 2px 24px;
        font-size: 15px;
        color: #333;
        display: flex;
        height: 36px;
        align-items: center;
        margin: 0px !important;
        margin-bottom: 10px !important;
        font-weight: 700;
      }

      .list {
        margin-bottom: 20px;

        .list-div {
          display: flex;
          flex-wrap: wrap;

          div {
            width: 33.3%;
            display: flex;
            height: 36px;
            align-items: center;

            p {
              width: 112px;
              padding: 2px 2px 2px 24px;
              background-color: rgba(249, 249, 249, 1);
              font-size: 15px;
              color: #333;
              display: flex;
              height: 36px;
              align-items: center;
              margin: 0px !important;
            }

            span {
              width: calc(100% - 112px);
              padding: 2px 2px 2px 24px;
              font-size: 15px;
              color: #333;
              display: flex;
              height: 36px;
              align-items: center;

              &.b {
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
</style>
